<template>
  <div class="courseAuditorium">
    <div class="courseTopic" @touchstart="operateTextField">
      <!-- <div class="topicHeader">
        <div class="topicTitle">【Day {{courseData.section_number}}】{{courseData.section_name}}</div>
        <div class="topTime">{{courseTime}}</div>
      </div> -->
      <div class="topicContent">
        <div class="topicCell" v-for="(item, index) in courseData.section_lesson" :key="index">
          <div class="cellText" v-if="item.status === 0" :class="{ lastHint: index ===  (courseData.section_lesson.length-1)}">
            <div class="textTitle" v-if="item.name">{{item.name}}</div>
            <div class="textContent">
              <P v-for="(itemText, indexText) in item.cache" :key="indexText">{{itemText}}</P>
            </div>
          </div>

          <div class="cellImage" v-if="item.status === 1">
            <div class="imageTitle">{{item.name}}</div>
            <div class="imageContent" @click="previewImageList(item, courseData.section_lesson)">
              <img :src="item.content" lazy-load  mode="widthFix">
            </div>
            <div class="imageDepict">{{item.describe}}</div>
          </div>

          <!-- <div class="cellAudio" v-if="item.status === 2">
            <div class="audioTitle">{{item.name}}</div>
            <div class="audioContent">
              <audioModule :audioData="item" @audioeNotice="audioeNotice" v-if="item"></audioModule>
            </div>
          </div> -->

          <div class="cellVideo" v-if="item.status === 3">
            <div class="videoTitle">{{item.name}}</div>
            <div class="videoContent" @click.stop.prevent="commentVideo(item)">
              <!-- <videoModule :videoId="'tVideo-'+index" :videoData="item" @videoMeans="videoMeans" v-if="item"></videoModule> -->
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_capture%402x.png" mode="aspectFill">
              <div class="videoBtn">
                  <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fvideo_play%402x.png" lazy-load>
              </div>
            </div>
          </div>

          <div class="cellTask" v-if="item.status === 4">
            <div class="taskTitle">【作业】</div>
            <div class="taskContent">
              <p v-for="(itemTask, indexTask) in item.cache" :key="indexTask">{{itemTask}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {obtainCourseParticulars, amendCourseParticulars, obtainCommmentList} from '@/config/api'
import {dateRegExp, commentRegExp} from '@/config/mUtils'
import {showMessager, showPictureCard} from '@/config/wUtils'
import commentModule from '@/components/comment'
import videoModule from '@/components/video'
import audioModule from '@/components/audio'

export default {
  components:{
    videoModule,
    audioModule
  },
  data () {
    return {
    //   // 用户信息
    //   userInfo: [],
    // 课程数据
    courseData: [],
    // // 课程时间
    // courseTime: '',
    // // 课程内容
    // courseMatter: [],

    // // 显示加载更多
    // showLoading: false,

    // // 评论数据
    // commentData: [],

    // 评论视频 对象
    commentVideoItem: {},
    // 显示 评论视频
    showCommentVideo: false,

    // // 评论 不满10条时 每页的条数
    // commentRow: null,
    // // 评论 总条数
    // commentAllRow: null,

    // // 评论列表 加锁
    // commentLock: false,
    // // 分享 数据
    // shareData: [],

    // // 隐藏输入框
    // hiddenInput: false,

    // // 评论触发
    // commentStrike: false,
    }
  },

  mounted () {
    let self = this
    // 初始化 小讲堂界面
    self.initCourseAuditorium();
  },
  methods: {
    // 初始化 小讲堂界面
    initCourseAuditorium(){
      let self = this;
      if(self.$root.$mp.query.section_id && self.$root.$mp.query.batch_id){
        // 获取 课程详情 数据
        self.acquireCourseParticularsData()
      }
    },
    // 初始化 多媒体
    initMultimedia(){
      let self = this;
      // 帖子 多媒体
      if (self.courseData.section_lesson) {
        self.courseData.section_lesson.forEach((itemCourse, indexCourse) => {
          itemCourse.play = 0
        })
      }
    },
    // 获取 课程详情 数据
    async acquireCourseParticularsData () {
      console.log('获取 课程详情 数据')
      let self = this
      wx.showNavigationBarLoading()
      // 本地用户信息
      const userInfo = await wx.getStorageSync('userInfo')
      if (JSON.stringify(userInfo) != '[]') {
        // userInfo.unionId 
        const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk';
        const student_id = wx.getStorageSync('student_id');
        let courseInfo = await obtainCourseParticulars(self.$root.$mp.query.section_id, self.$root.$mp.query.batch_id, union_id, student_id)
        if (courseInfo.status === 200) {
          // 课程数据
          self.courseData = courseInfo.data
        }
        console.log(courseInfo, '....课程详情')
      }
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },
    // video组件 触发的方法
    async videoMeans (item) {
      let self = this;
      // 初始化 多媒体
      self.initMultimedia()
      // item.play = 1
      self.set(item, 'play', 1)
      console.log(item, '..........video组件 触发的方法')
      let class_time = (self.courseData.start_time - 0) + (self.courseData.section_day - 0 - 1)*24*60*60*1000
      const courseState = await amendCourseParticulars(
        wx.getStorageSync('student_id'),
        self.$root.$mp.query.batch_id,
        self.$root.$mp.query.section_id,
        JSON.stringify(item),
        class_time
      )
      console.log(courseState, '..........courseState')
      if (courseState.status === 200){
        wx.setStorageSync('plan_state', 1)
      }
    },
    // // audio组件 触发的方法
    // audioeNotice (item) {
    //   let self = this;
    //   if (!item.play) {
    //     // 初始化 多媒体
    //     self.initMultimedia()
    //     item.play = 1
    //   } else {
    //     // 初始化 多媒体
    //     self.initMultimedia()
    //   }
    // },
    // 播放 comment组件 视频
    commentVideo (item) {
      let self = this;
      console.log(item, '播放 comment组件 视频')
      // 初始化 多媒体
      self.initMultimedia()
      if (item) {
        // wx.navigateTo({
        //   url: '../commentVideo/main?comment_video='+item.url content
        // })
        wx.navigateTo({
          url: '../commentVideo/main?comment_video='+item.content
        })
      }
    },
    // 展示 图片列表
    previewImageList(item, itemList) {
      let self = this;
      if (item.status === 1){
        let imageList = []
        itemList.forEach( (itemCell, index) => {
          console.log(itemCell, '......展示图片列表')
          if (itemCell.status === 1) {
            imageList.push(itemCell.content)
          }
        });
        showPictureCard(item.content, imageList)
      }
    },
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this
    // 初始化 多媒体
    self.initMultimedia()
    // 初始化 小讲堂界面
    self.initCourseAuditorium();
  },
  // 上拉加载
  onReachBottom() {},
  // 切换界面
  onHide () {
    let self = this;
    // 初始化 多媒体
    self.initMultimedia()
  },
  // 滚动界面
  onPageScroll() {},
  // 页面加载
  onLoad() {},
  // 页面显示
  onShow() {}
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.courseAuditorium{
    width: 100%;
    background: #ffffff;
    // .courseTopic{
    //   margin: 0 32rpx;
    //   .topicHeader{
    //     .topicTitle{
    //       font-family: PingFangSC-Medium;
    //       font-size: 46rpx;
    //       color: #333333;
    //       letter-spacing: 0.96rpx;
    //       margin-bottom: 30rpx;
    //     }
    //     .topTime{
    //       height: 40rpx;
    //       line-height: 40rpx;
    //       font-family: PingFangSC-Regular;
    //       font-size: 28rpx;
    //       color: #999999;
    //       margin-bottom: 32rpx;
    //     }
    //   }
      .topicContent{
        margin: 0 32rpx;
        margin-top: 10rpx;
        .topicCell{
          .cellText{
            width: 100%;
            margin-bottom: 50rpx;
            line-height: 50rpx;
            // margin-top: -11rpx;
            text-align: justify;
            letter-spacing: 3.21rpx;
            .textTitle{
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              width: 100%;
            }
            .textContent{
              font-family: PingFangSC-Regular;
              font-size: 28rpx;
              color: #333333;
              width: 100%;
              letter-spacing: 1.5rpx;
              line-height: 40rpx;
            }
          }

          .lastHint{
            .textContent{
              font-family: PingFangSC-Regular;
              font-size: 28rpx;
              color: #666666;
               width: 100%;
              letter-spacing: 1.5rpx;
              line-height: 40rpx;
            }
          }

          .cellImage{
            width: 100%;
            margin-bottom: 40rpx;
            letter-spacing: 3rpx;
            .imageTitle{
              width: 100%;
              line-height: 1;
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              margin-bottom: 40rpx;
            }
            .imageContent{
              width: 100%;
              margin-bottom: 15rpx;
              img{
                width: 100%;
              }
            }
            .imageDepict{
              width: 100%;
              line-height: 1;
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #666;
              text-align: center;
            }
          }

          .cellAudio{
            width: 100%;
            margin-bottom: 40rpx;
            letter-spacing: 3rpx;
            .audioTitle{
              width: 100%;
              line-height: 1;
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              margin-bottom: 40rpx;
            }
            .audioContent{
              width: 100%;
              text-align: center;
              audio{
                width: 100%;
              }
            }
          }

          .cellVideo{
            margin-bottom: 50rpx;
            .videoTitle{
              width: 100%;
              line-height: 1;
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              margin-bottom: 40rpx;
            }
            .videoContent{
              width: 100%;
              height: 360rpx;
              // video{
              //   width: 100%;
              //   height: 360rpx;
              // }
              position: relative;
              img{
                  width: 100%;
                  height: 100%;
              }
              .videoBtn{
                  position:absolute;
                  width: 120rpx;
                  height: 120rpx;
                  line-height: 120rpx;
                  top: 50%;
                  left: 50%;
                  margin-left: -60rpx;
                  margin-top: -60rpx;
                  img{
                      width: 100%;
                      height: 100%;
                  }
              }
            }
          }

          .cellTask{
            width: 100%;
            margin-bottom: 70rpx;
            margin-top: -11rpx;
            line-height: 50rpx;
            text-align: justify;
            letter-spacing: 3rpx;
            .taskTitle{
              font-family: PingFangSC-Regular;
              font-size: 28rpx;
              color: #333333;
              width: 100%;
            }
            .taskContent{
              font-family: PingFangSC-Regular;
              font-size: 28rpx;
              color: #333333;
              width: 100%;
            }
          }

    
      }
    }
}
</style>
